<template>
  <div>
    <el-form ref="form" :model="form" label-width="80px">
      <el-row>
        <el-col :span="6">
          <div class="grid-content bg-purple" />
          <el-form-item label="公寓名称">
            <el-input v-model="form.flatName" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple" />
          <el-form-item label="楼盘名称">
            <el-autocomplete
              class="inline-input"
              v-model="form.name"
              :fetch-suggestions="querySearch"
              placeholder="请输入内容"
              :trigger-on-focus="false"
              @select="handleSelect"
            ></el-autocomplete>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="公共配套">
        <el-checkbox-group v-model="form.publicFacilityList">
          <el-checkbox
            v-for="pub in publicList"
            :key="pub.id"
            :value="pub.id"
            :label="pub.id"
          >
            {{ pub.name }}
          </el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="公共区域图片">
            <el-upload
              class="avatar-uploader"
              action="http://localhost:9999/house-resource/oss/upload"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload">
              <img v-if="imageUrl" :src="imageUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
      </el-form-item>
      <el-col :span="2">
          <el-form-item label="押款方式">
            押
            <select v-model="form.paymentMortgage" >
              <option :label="1">1</option>
              <option :label="2">2</option>
              <option :label="3">3</option>
            </select>
          </el-form-item>
        </el-col>
      <el-col :span="2">
          <el-form-item>
            付
            <select v-model="form.paymentPay" >
              <option :label="1">1</option>
              <option :label="2">2</option>
              <option :label="3">3</option>
              <option :label="4">4</option>
              <option :label="5">5</option>
              <option :label="6">6</option>
            </select>
          </el-form-item>
        </el-col>
      <el-col :span="2">
          <el-form-item label="户型">
            <select v-model="form.room" >
              <option :label="1">1</option>
              <option :label="2">2</option>
              <option :label="3">3</option>
              <option :label="4">4</option>
              <option :label="5">5</option>
              <option :label="6">6</option>
            </select>
            室
          </el-form-item>
        </el-col>
      <el-col :span="2">
          <el-form-item>
            <select v-model="form.hall" >
              <option :label="1">1</option>
              <option :label="2">2</option>
              <option :label="3">3</option>
            </select>
            厅
          </el-form-item>
        </el-col>
      <el-form-item label="装修类型">
        <el-select v-model="form.type" placeholder="请选择活动区域">
          <el-option value="0" label="精装">精装</el-option>
          <el-option value="1" label="简装">简装</el-option>
          <el-option value="2" label="毛坯">毛坯</el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="管家">
        <el-select v-model="form.deptId" placeholder="请选择活动区域">
          <el-option
            v-for="dept in deptList"
            :key="dept.userId"
            :value="dept.userId"
            :label="dept.username"
          >
            {{ dept.username }}
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="活动形式">
        <el-input v-model="form.introduce" type="textarea" />
      </el-form-item>
      <el-row>
        <el-col :span="8" v-for="style in houseStyle"  >
            <img :src="style.reserve1" width="100px" height="100px">
            {{style.acreage}}
        </el-col>

      </el-row>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">下一步</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
    <el-button type="primary" @click="toAdd">添加房型</el-button>
    <el-dialog
      title="提示"
      :visible.sync="centerDialogVisible"
      width="30%"
      center
    >
      <el-form ref="form" :model="addform" label-width="80px">
        <el-form-item label="房型名称">
          <el-input v-model="addform.acreage" />
        </el-form-item>
        <el-form-item label="面积">
          <el-input v-model="addform.proportion" />
        </el-form-item>
        <el-form-item label="朝向">
          <el-select v-model="addform.direction" placeholder="请选择活动区域">
            <el-option label="东" value="1" />
            <el-option label="南" value="2" />
            <el-option label="西" value="3" />
            <el-option label="北" value="4" />
            <el-option label="东南" value="5" />
            <el-option label="西南" value="6" />
            <el-option label="西北" value="7" />
            <el-option label="东北" value="8" />
          </el-select>
        </el-form-item>
        <el-form-item label="公共配套">
          <el-checkbox-group v-model="addform.privateFacility">
            <el-checkbox
              v-for="pri in privateList"
              :key="pri.name"
              :value="pri.id"
              :label="pri.name"
            >
              {{ pri.name }}
            </el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="租金">
          <el-input v-model="addform.rental" />
        </el-form-item>
        <el-form-item label="公共区域图片">
          <el-upload
            class="avatar-uploader"
            action="http://localhost:9999/house-resource/oss/upload"
            :show-file-list="false"
            :on-success="handleAvatarSuccess01"
            :before-upload="beforeAvatarUpload01">
            <img v-if="image" :src="image" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="add1">确定添加</el-button>
        <el-button type="primary" @click="add">继续添加</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      restaurants: [],
      image: null,
      imageUrl: null,
      centerDialogVisible: false,
      publicList: [],
      deptList: [],
      privateList: [],
      houseStyle: [],
      form: {
        name: null,
        flatName: null,
        paymentMortgage: null,
        paymentPay: null,
        room: null,
        hall: null,
        introduce: null,
        deptId: null,
        publicFacilityList: [],
        type: null,
        houseImages:null
      },
      addform: {
        privateFacility: [],
        acreage: null,
        proportion: null,
        direction: null,
        rental: null,
        reserve1: null,
      }
    }
  },
  created() {
    this.axios.get('http://localhost:9999/house-resource/tbPublicFacility/selectAll').then((response) => {
      this.publicList = response.data.obj
    })
    this.axios.get('http://localhost:9999/house-resource/sysUser/selectAllUserName').then((response) => {
      console.log(response.data.obj)
      this.deptList = response.data.obj
    })
    this.axios.get('http://localhost:9999/house-resource/tbHouseInfo/selectAllPrivate').then((response) => {
      this.privateList = response.data.obj
    })
  },
  methods: {
    toAdd(){
      this.centerDialogVisible=true
      this.addform = {
        privateFacility: [],
          acreage: null,
          proportion: null,
          direction: null,
          rental: null
      }
    },
    onSubmit() {
       this.$router.push({"path":"loudong"})
    },
    add() {
      this.houseStyle.push(this.addform)
      console.log(this.houseStyle)
      centerDialogVisible: false
    }, handleAvatarSuccess(res, file) {
      this.imageUrl = res
      this.form.houseImages = res

    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;
/*
      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }*/
      return true;
    },
    add1(){
      this.houseStyle.push(this.addform)
      console.log(this.houseStyle)
      centerDialogVisible: true
    }, handleAvatarSuccess01(res, file) {
      this.image = res
      this.addform.reserve1 = res

    },
    beforeAvatarUpload01(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;
      /*
            if (!isJPG) {
              this.$message.error('上传头像图片只能是 JPG 格式!');
            }
            if (!isLt2M) {
              this.$message.error('上传头像图片大小不能超过 2MB!');
            }*/
      return true;
    },
    querySearch(queryString, cb) {
      var restaurants = this.restaurants;
      var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
      }
    },
    loadAll(){
      this.axios.get("").then((response)=> {

      })

    },handleSelect(item){
      console.log(item);
    }
  }
}
</script>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

